<!DOCTYPE html>
<html>
<head>
    <title>太阳系模拟器</title>
    <style>
        body { margin: 0; overflow: hidden; }
        #info {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-family: Arial;
            font-size: 14px;
            background: rgba(0,0,0,0.5);
            padding: 10px;
            border-radius: 5px;
        }
        #controls {
            position: absolute;
            bottom: 10px;
            left: 10px;
            color: white;
            background: rgba(0,0,0,0.5);
            padding: 10px;
            border-radius: 5px;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <!-- 修改 OrbitControls 的引入 -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
</head>
<body>
    <div id="info">选择天体以查看信息</div>
    <div id="controls">
        <button onclick="toggleSimulation()">暂停/继续</button>
        <input type="range" min="0" max="5" step="0.1" value="1" oninput="updateSpeed(this.value)">
        <span id="speedValue">1x</span>
    </div>

<script>
let scene, camera, renderer, controls;
let planets = [];
let selectedObject = null;
let simSpeed = 1;
let isPaused = false;

// 行星数据（天文单位、轨道周期（地球年）、大小比例）
// 修改行星数据，添加中文名称
const planetData = {
    'Mercury': {distance: 0.387, period: 0.24, size: 0.383, color: 0xC4C4C4, cnName: '水星'},
    'Venus': {distance: 0.723, period: 0.615, size: 0.949, color: 0xFAD89D, cnName: '金星'},
    'Earth': {distance: 1, period: 1, size: 1, color: 0x6B93D6, cnName: '地球'},
    'Mars': {distance: 1.524, period: 1.88, size: 0.532, color: 0xE27B58, cnName: '火星'},
    'Jupiter': {distance: 5.203, period: 11.86, size: 11.209, color: 0xC88B3A, cnName: '木星'},
    'Saturn': {distance: 9.537, period: 29.46, size: 9.449, color: 0xE4C04D, cnName: '土星'},
    'Uranus': {distance: 19.191, period: 84.01, size: 4.007, color: 0xC8E4E4, cnName: '天王星'},
    'Neptune': {distance: 30.069, period: 164.79, size: 3.883, color: 0x5B5DDF, cnName: '海王星'}
};

init();
animate();

function init() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x000000); // 添加黑色背景
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer({ antialias: true }); // 添加抗锯齿
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 修改太阳大小和发光效果
    const sunGeometry = new THREE.SphereGeometry(2, 32, 32);
    const sunMaterial = new THREE.MeshBasicMaterial({
        color: 0xFFFF00,
        emissive: 0xFFFF00,
        emissiveIntensity: 1
    });
    const sun = new THREE.Mesh(sunGeometry, sunMaterial);
    scene.add(sun);

    // 增强太阳光源
    const sunLight = new THREE.PointLight(0xFFFFFF, 2);
    sunLight.position.set(0, 0, 0);
    scene.add(sunLight);

    // 创建行星
    for (let name in planetData) {
        const data = planetData[name];
        const planetGeometry = new THREE.SphereGeometry(data.size * 0.3, 32, 32);
        const planetMaterial = new THREE.MeshPhongMaterial({
            color: data.color,
            shininess: 30
        });
        const planet = new THREE.Mesh(planetGeometry, planetMaterial);
        planet.userData = {
            name: name,
            ...data
        };
        scene.add(planet);
        planets.push(planet);

        // 添加轨道
        const orbitGeometry = new THREE.RingGeometry(data.distance * 10, data.distance * 10 + 0.1, 64);
        const orbitMaterial = new THREE.MeshBasicMaterial({
            color: 0x666666,
            side: THREE.DoubleSide,
            opacity: 0.3,
            transparent: true
        });
        const orbit = new THREE.Mesh(orbitGeometry, orbitMaterial);
        orbit.rotation.x = Math.PI / 2;
        scene.add(orbit);
    }

    // 调整相机初始位置
    camera.position.set(50, 30, 50);
    camera.lookAt(0, 0, 0);

    // 修改环境光强度
    const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
    scene.add(ambientLight);

    // 配置 OrbitControls
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    controls.minDistance = 10;
    controls.maxDistance = 200;

    // 添加点击事件
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();

    window.addEventListener('click', (event) => {
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

        raycaster.setFromCamera(mouse, camera);
        const intersects = raycaster.intersectObjects(planets);

        if (intersects.length > 0) {
            selectedObject = intersects[0].object;
            updateInfo();
        }
    });
}

function animate() {
    requestAnimationFrame(animate);

    if (!isPaused) {
        planets.forEach(planet => {
            const angle = Date.now() * 0.001 * simSpeed / planet.userData.period;
            planet.position.x = Math.cos(angle) * planet.userData.distance * 10;
            planet.position.z = Math.sin(angle) * planet.userData.distance * 10;
            planet.rotation.y += 0.01; // 添加自转效果
        });
    }

    controls.update(); // 更新控制器
    renderer.render(scene, camera);
}

// 修改信息显示函数
function updateInfo() {
    if (selectedObject) {
        const info = document.getElementById('info');
        info.innerHTML = `
            天体: ${selectedObject.userData.cnName} (${selectedObject.userData.name})<br>
            距离太阳: ${selectedObject.userData.distance.toFixed(3)} AU<br>
            公转周期: ${selectedObject.userData.period.toFixed(2)} 年<br>
            相对地球大小: ${selectedObject.userData.size.toFixed(3)}
        `;
    }
}

function toggleSimulation() {
    isPaused = !isPaused;
}

function updateSpeed(value) {
    simSpeed = parseFloat(value);
    document.getElementById('speedValue').textContent = simSpeed + 'x';
}

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>